<template>
  <div class="side-panel">
    <div class="main-title">流程组件</div>

    <div class="title-line" :class="{'title-line-shrink': !expandStatus['common']}">
      <div>通用组件</div>
      <div class="expand-indicator"
            :class="{'expand-indicator-up': expandStatus['common']}" @click="handleExpand('common')">
        <el-icon><arrow-down /></el-icon>
      </div>
    </div>
    <div class="content  content-padding-vertical node-panel-content"
         :class="{'shrink-content': !expandStatus['common']}">
      <custom-image v-for="(item, index) in CommonNodeList" :key="index"
                    position="sidePanel"
                    :node-data="item"
                    style="margin-bottom: 24px;cursor: grab"
                    draggable="true">
      </custom-image>
    </div>

    <div class="title-line" :class="{'title-line-shrink': !expandStatus['action']}">
      <div>执行动作</div>
      <div class="expand-indicator"
            :class="{'expand-indicator-up': expandStatus['action']}"
            @click="handleExpand('action')">
        <el-icon><ArrowDown /></el-icon>
      </div>
    </div>
    <div class="content content-padding-vertical node-panel-content"
         :class="{'shrink-content': !expandStatus['action']}">
      <custom-image v-for="(item, index) in _ActionNodeList" :key="index"
                    position="sidePanel"
                    :node-data="item"
                    style="margin-bottom: 24px;cursor: grab"
                    draggable="true">
      </custom-image>
    </div>

<!--    <div class="title-line " :class="{'title-line-shrink': !expandStatus['event']}">-->
<!--      <div>触发条件</div>-->
<!--      <div class="center-button" style="color:rgba(0, 30, 112, 1)" @click="addCustomEvent"><el-icon><plus /></el-icon> 自定义事件</div>-->
<!--      <div class="expand-indicator"-->
<!--            :class="{'expand-indicator-up': expandStatus['event']}"-->
<!--            @click="handleExpand('event')">-->
<!--        <el-icon><arrow-down /></el-icon>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="content section-panel-content" :class="{'shrink-content': !expandStatus['event']}">-->
<!--      <div class="section-title ">公共组件</div>-->
<!--      <div class="section-content">-->
<!--        <custom-image v-for="(item, index) in _PublicEventList" :key="index"-->
<!--                      position="sidePanel"-->
<!--                      :node-data="item"-->
<!--                      style="margin-bottom: 24px;cursor: grab"-->
<!--                      draggable="true">-->
<!--        </custom-image>-->
<!--      </div>-->

<!--      <div class="section-title ">-->
<!--        <span style="margin-right: 12px">自定义事件组件</span>-->
<!--        <el-tooltip-->
<!--            class="box-item"-->
<!--            effect="dark"-->
<!--            content="该事件只属于该流程"-->
<!--            placement="top">-->
<!--          <el-icon><Warning /></el-icon>-->
<!--        </el-tooltip>-->
<!--      </div>-->
<!--      <div class="section-content ">-->
<!--        <div class="custom-event-icon"-->
<!--             v-for="(item, index) in _CustomEventList"-->
<!--             :key="index"-->
<!--             @mouseenter="(e) => handleEventIconMouseEnter(e, index)"-->
<!--             @mouseleave="(e) => handleEventIconMouseLeave(e, index)"-->
<!--        >-->
<!--          <custom-image position="sidePanel"-->
<!--                        :node-data="item"-->
<!--                        style="margin-bottom: 24px;cursor: grab"-->
<!--                        draggable="true">-->
<!--          </custom-image>-->
<!--          <div class="float-button">-->
<!--            <img class="edit-icon" :src="EditIcon" @click="handleEditCustomEvent(index)" alt="编辑"/>-->
<!--            <img class="delete-icon" :src="DeleteIcon" @click="handleDeleteCustomEvent(index)" alt="删除"/>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--    </div>-->
  </div>
</template>

<script setup lang="ts">
// import {PropType} from "vue";
import {Plus, WarningFilled, ArrowDown} from "@element-plus/icons-vue";
// import EditIcon from "@/assets/stencil/edit.png";
// import DeleteIcon from "@/assets/tools/delete.png";
// import CustomEvent from "@/assets/nodeIcon/customEvent.png";
// import PublicEvent from "@/assets/nodeIcon/publicEvent.png";
import FixedEventIcon from "@/assets/nodeIcon/fixedEvent.png";

// import CanvasApi from "@/api/canvasApi";
import CustomImage from "@/views/workTable/components/customImage.vue";
import {ActionNodeList, NodesList} from "../nodes/nodeConfig.js"

import validateStencilDrop from '../nodes/validateStencilDrop'
import useFrom from "../compositions/useFrom";
// import {useGetPublicEvent} from "@/views/workTable/compositions/useGetPublicEvent";
// import { conditionalOriginal } from "@/utils"

const props = defineProps({
  graph: {
    type: Object,
    required: true,
  },
  droppableContainer: {
    type: String,
    default: '.x6-graph-scroller-content'
  },
  // customEvents: {
  //   type: Array as PropType<{name: string, icon: string, [propKey: string]: any}[]>,
  //   default() {
  //     return []
  //   }
  // },
})

const emits = defineEmits([
  'node-dropped',
  // 'add-custom-event',
  // 'edit-custom-event',
  // 'delete-custom-event'
])
const store = useStore()

// 如果这两个方法不定义，customImage的inject 会报错。
// customImage 继承自vue-shape. vue-shape 会提供getNode和getGraph方法，
// customImage 在sidePanel 中仅做样式渲染，所以provide 两个空函数定义即可
const getNode = () => {
  console.warn('getNode 当前由side panel提供 => void 0')
  return {}
}
const getGraph = () => {
  return props.graph
}
provide('getNode', getNode)
provide('getGraph', getGraph)

const expandStatus = reactive({
  'common': true,
  'action': true,
  // 'event': true,
})

// 通用组件
const CommonNodeList = reactive(NodesList.filter(item => {
  return [
    'start',
    'condition',
    // 'switcherConcurrent',
    'switcherCondition',
    'wait',
    'abtest',
    'end'].includes(item.key)
}))
// const fixedEventNode = reactive({
//   key: 'event',
//   label: '标签/事件判断',
//   iconSrc: FixedEventIcon,
//   data: {
//     dialogData: {
//       name: "标签/事件判断",
//       conditionalOriginal: JSON.stringify({
//         joinOperator: "And",
//         children: [
//           {
//             joinOperator: "And",
//             children: [
//               {
//                 joinOperator: "And",
//                 children: [
//                   {
//                     expression: "",
//                     joinOperator: "And",
//                     eventValue: "event",
//                     propertyType: "",
//                     propertyKey: "",
//                     relation: "",
//                     value: "",
//                   },
//                 ],
//               },
//             ],
//           },
//         ],
//       }),
//     }
//   }
// })
// CommonNodeList.splice(CommonNodeList.length - 1, 0, fixedEventNode)

// 执行动作
const _ActionNodeList = ref([...ActionNodeList])

// 自定义事件
// const _CustomEventList = computed(() => {
//   return props.customEvents.map((item) => ({
//     key: 'event',
//     label: item.name,
//     iconSrc: CustomEvent,
//     data: {
//       dialogData: {
//         name: item.name,
//         conditionalOriginal: JSON.stringify(conditionalOriginal(item, 'event')),
//       },
//     },
//   }))
// })

// 公共事件
// const {publicEventList: _PublicEventList, getPublicEvent} = useGetPublicEvent()

const handleExpand = (groupName: string) => {
  expandStatus[groupName] = !expandStatus[groupName]
}

// const addCustomEvent = () => {
//   emits('add-custom-event')
// }
//
// const handleEventIconMouseEnter = (e: Event, index:number) => {
//   const targetElement = document.getElementsByClassName('float-button')[index] as HTMLElement
//   targetElement.style.setProperty('display', 'block')
// }
//
// const handleEventIconMouseLeave = (e: Event, index: number) => {
//   const targetElement = document.getElementsByClassName('float-button')[index] as HTMLElement
//   targetElement.style.setProperty('display', 'none')
// }
//
// const handleEditCustomEvent = (index:number) => {
//   emits('edit-custom-event', index)
// }
//
// const handleDeleteCustomEvent = (index:number) => {
//   emits('delete-custom-event', index)
// }

const bindDropEvent = () => {
  const targetElement = document.querySelector('.x6-graph-scroller-content') as HTMLElement
  targetElement.addEventListener('dragover', (e) => {
    e.preventDefault()
  })

  targetElement.addEventListener('drop', handleDrop)
}

const handleDrop = (e:DragEvent) => {
  e.preventDefault()
  const transferData = JSON.parse(e?.dataTransfer?.getData('Text') ?? '{}')
  if (!validateStencilDrop(transferData, props.graph)) {
    return
  }

  const position = props.graph.pageToLocal(e.pageX - transferData.width / 2, e.pageY - transferData.height / 2)
  const addedNode = props.graph.addNode({
    shape: transferData.key,
    data: {
      dialogOpenWay: 'create',
      ...transferData.data
    },
    position: {
      x: position.x,
      y: position.y
    },
    label: transferData.label,
    iconSrc: transferData.iconSrc,
  })
  emits('node-dropped', props.graph.getCellById(addedNode.id))
}

const from = useFrom()

onMounted(() => {
  nextTick(() => {
    bindDropEvent();
  })

  // if (from === 'merchant') {
  //   getPublicEvent()
  // }
})

</script>

<style scoped lang="scss">
.side-panel {
  background: white;
  height: 100%;
  overflow: auto;

  .main-title {
    font-size: 20px;
    font-weight: bold;
    height: 68px;
    line-height: 68px;
    vertical-align: middle;
    padding: 0 25px;
  }

  .title-line {
    background: rgba(246, 250, 255, 1);
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;

    .expand-indicator {
      cursor: pointer;
    }

    .expand-indicator-up {
      transform: rotate(180deg);
    }

    .center-button {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin: 12px;
      cursor: pointer;
    }
  }

  .title-line-shrink {
    margin-bottom: 10px;
  }

  .shrink-content {
    height: 0;
    overflow: hidden;
    padding: 0;
  }

  .content-padding-vertical {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .node-panel-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 9px;
  }

  .section-panel-content {
    margin: 25px 0;
  }

  .section-title {
    font-size: 12px;
    color: #2C313B;
    display: flex;
    align-items: center;
    padding: 0 25px;
  }

  .section-content {
    display: flex;
    flex-wrap: wrap;
    padding: 0 9px;
  }

  .custom-event-icon {
    position: relative;

    .float-button {
      position: absolute;
      top: 0;
      right: 0;
      display: none;

      >img {
        width: 20px;
        cursor: pointer;
        margin-left: 5px;
      }
    }
  }
}
</style>
